<template>
  <view>
    <van-popup v-model="show" round position="bottom" :style="{ height: '50%' }" get-container="body" :overlay="false">
        <view class="popup-content">
          <view class="popup-header">
            <text class="popup-title">生活圈</text>
            <view class="popup-item-select">
              <view :class="['popup-item',queryType === item.value ? 'active' : '']" v-for="(item,index) in options" :key="index" @click="itemClick(item)">
                {{item.text}}
              </view>
            </view>
          </view>
          <ne-tabs :tabs="tabs" mode="button" @change="tabChange"/>
          <view style="margin-top: 10px;height: calc(100vh * 0.5 - 56px - 36px - 20px);overflow:auto;">
            <van-skeleton :row="13" :loading="loading">
              <area-card
                  v-for="(item,index) in list"
                  :key="index"
                  :row="item"
                  @itemClick="areaClick"
              />
              <van-empty v-if="!list.length" description="暂无数据"/>
            </van-skeleton>
          </view>
        </view>
    </van-popup>
    <van-action-sheet
        v-model="isShowSheet"
        title="使用地图打开"
        :actions="sheetList"
        cancel-text="取消"
        description="如果点击无响应，可能是您还没有安装该APP"
        close-on-click-action
        @select="handleSheetSelect"
    />
  </view>
</template>

<script>
import NeTabs from "../../../components/NeTabs.vue";
import areaCard from "./areaCard.vue";
import {queryKeyPlacesDistance} from "../../../api/tbKeyPlaces";
import {getDict} from "../../../api/tbDict";
import {navToMap, toMiniProgram} from "../../../utils/utils";
const ICON_MAP = {
  '3': require('../../../static/image/map-zf.png'),
  '4': require('../../../static/image/map-gj.png'),
  '6': require('../../../static/image/map-gy.png')
};
function generateUUIDLikeNumber(length) {
  let result = '';
  for (let i = 0; i < length; i++) {
    result += Math.floor(Math.random() * 10);
  }
  return result;
}
export default {
  components: {NeTabs,areaCard},
  data() {
    return {
      isShowSheet:false,
      loading:false,
      show: true,
      queryType:'1',
      placesType:'',
      tabs: [],
      list:[],
      distance:500,
      queryText:'5分钟',
      icon:'',
      options:[
        {
          text:'全部',
          value:'',
          distance:10000
        },
        {
          text:'5分钟',
          value:'1',
          distance:500
        },
        {
          text:'15分钟',
          value:'2',
          distance:1500
        }
      ],
      sheetList: [
        {
          name: '百度地图',
          id: 1,
        },
        {
          name: '高德地图',
          id: 2,
        },
      ],
      placesLatitude:'',
      placesLongitude:''
    }
  },
  props:{
    latitude:{
      type:[String,Number],
      default:''
    },
    longitude:{
      type:[String,Number],
      default:''
    }
  },
  methods:{
    areaClick(row){
      this.placesLatitude = row.placesLatitude || this.latitude
      this.placesLongitude = row.placesLongitude || this.longitude
      let map = {
        "type": 2,
        "endPos": {
          "latitude": Number(this.placesLatitude),
          "longitude": Number( this.placesLongitude),
          "strName":row.placesIntroduced,
          "strUid": generateUUIDLikeNumber()
        },
        "isFocus": false,
        "from": "index_poidetail"
      }
      let path = `modules/route/pages/index/index?option=${JSON.stringify(map)}`
      toMiniProgram("wx7643d5f831302ab0",path)
      // this.isShowSheet = true
      // uni.openLocation({
      //   latitude: Number(this.placesLatitude),
      //   longitude:Number( this.placesLongitude),
      //   success: function () {
      //     console.log('success');
      //   }
      // });
    },
    handleSheetSelect(action) {
      navToMap(this.latitude, this.longitude, '目的地', action.id)
    },
    async search(){
      this.loading = true
      let res = await queryKeyPlacesDistance({queryType:this.queryType,placesType:this.placesType,longitude:String(this.longitude),
        latitude:String(this.latitude)})
      this.loading = false
      if(res.data && res.data.length>0){
        this.list = res.data.map(item=>({
          ...item,
          icon:ICON_MAP[item.placesType] || require('../../../static/image/map-zf.png'),
        }))
      }else{
        this.list = []
      }
      this.$emit('change',{distance:this.distance,list:this.list,queryText:this.queryText})
    },
    itemClick({value,distance,text,icon}){
      this.queryType = value
      this.distance = distance
      this.queryText = text
      this.search()
    },
    tabChange(index){
      this.placesType = this.tabs[index].value
      this.search()
    }
  },
  mounted(){
    this.search()
    getDict("places_type").then(res=>{
      this.tabs = [{name:'全部',value:''}].concat(res.data.map(item => ({
        name: item.dictValue,
        value: item.dictKey
      })))
    })
  }
}
</script>
<style lang="scss" scoped>
.popup-content {
  padding: 0 12px 12px 12px;
  box-sizing: border-box;
  overflow: hidden;
  .popup-header {
    padding: 16px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .popup-title {
      font-size: 16px;
      font-weight: bold;
      color: #333333;
    }

    .popup-item-select {
      display: flex;
      align-items: center;
      .popup-item {
        padding: 2px 6px;
        background: $uni-color-success;
        color: #333333;
        font-size: 14px;

        &.active {
          background: $uni-color-primary;
          color: #ffffff;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
